<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="salesNumber" label="销售退货编号" width="150" />
    <el-table-column prop="sellThemes" label="销售退货主题" width="120" />
    <el-table-column prop="clientId" label="客户名称" width="120" />
    <el-table-column prop="salespeople" label="销售人员" width="120" />
    <el-table-column prop="projectId" label="关联项目" width="120" />
    <el-table-column prop="formattedReturnTime" label="退货日期" width="120" />
    <el-table-column prop="sumMoney" label="退货总金额" width="120" />
    <el-table-column fixed="right" label="操作" min-width="150">
      <template #default="scope">
        <el-button link type="danger" :icon="Delete" size="small" @click="Del(scope.row.itemizedReturnsId)">删除</el-button>
        <!-- <el-button link type="warning" :icon="Edit" size="small">修改</el-button> -->
      </template>
    </el-table-column>
  </el-table>

  <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]"
    layout="total, sizes, prev, pager, next, jumper" :total="form.totalCount" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage,ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { Wread, Wwrite } from "@/axios/axiosHelper"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const router = useRouter()

const tableData = ref([])

const form = reactive({
  pageIndex: 1,
  pageSize: 15,
  totalCount: 0,
  totalPage: 0,
})

const handleSizeChange = (val: number) => {
  Show();
}
const handleCurrentChange = (val: number) => {
  Show();
}

onMounted(() => {
  Show();
})

const Show=()=>{
  Wread.get("w2-read/api/ItemizedReturns/QueryItemizedReturns",{
    params: {
      pageIndex: form.pageIndex,
      pageSize: form.pageSize,
    }
  })
  .then(res=>{
    form.totalCount = res.data.totalCount;
    form.totalPage = res.data.totalPage;
    // 处理数据，格式化退货日期
    const processedData = res.data.data.map(item => {
      const date = new Date(item.returnTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      item.formattedReturnTime = `${year}-${month}-${day}`;
      return item;
    });
    tableData.value = processedData;
  })
}

const Del =(itemizedReturnsId:any)=>{
  ElMessageBox.confirm(
    '确定删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post("https://localhost:7114/api/ItemizedReturns/DelItemizedReturns",{
        itemizedReturnsId:itemizedReturnsId
      })
      .then(res=>{
        if(res.data.code==100){
          ElMessage.success(res.data.msg);
          Show();
        }
        else{
          ElMessage.error(res.data.msg);
          return;
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

</script>